<template>
	<view class="wallet">
		<!-- 提现----充值 功能 -->
		<view class="wallet-f">
			<view class="tip">
				鲸币余额
			</view>
			<view class="wallet-action">
				<view class="surplus">
					{{coinAmount}}
				</view>
				<view class="func">
					<view class="invest" @tap.stop="go('/pages/user/comps/invest')">
						充值
					</view>
					<view class="withdraw" @tap.stop="go('/pages/user/comps/withdraw')">
						提现
					</view>
				</view>
			</view>
			<view class="change-tip">
				兑换比例:100鲸币=1元，所得鲸币7天后可以提现鲸币到账，可能会有延迟
			</view>
		</view>
		
		<view class="trade-record">
			<view class="desc">
				交易记录
			</view>
			<view class="select-tab">
				<view class="tabs" style="width: 100%; margin: 0 auto;background: #fff;">
					<v-tabs   v-model="activeTab"  :tabs="cateList"  @change="changeTab" :scroll="false" color="#999999" activeColor="#0068ff" lineColor="#0068ff" :paddingItem='0' lineHeight="3px" height="90rpx" bold="true" />
				</view>
			</view>
			<view class="list" v-if="tradeList && tradeList.length && isload">
				<view class="item" v-for="(item,index) in tradeList" :key="index">
					<view class="bereward-list" v-if="activeTab == 0">
						<view class="trade-type">
							<view class="type">收到{{item.user.name}}打赏</view>
							<view class="date">{{item.time}}</view>
						</view>
						<view class="money" >
							{{item.total_fee}}鲸币
						</view>
					</view>
					<view class="reward-list" v-if="activeTab == 1">
						<view class="trade-type">
							<view class="type">打赏{{item.rwuser.name}}</view>
							<view class="date">{{item.time}}</view>
						</view>
						<view class="money" >
							{{item.total}}鲸果
						</view>
					</view>
					<view class="invest-list" v-if="activeTab == 2">
						<view class="trade-type">
							<view class="type">充值</view>
							<view class="date">{{item.time}}</view>
						</view>
						<view class="money" >
							+{{item.total}}元
						</view>
					</view>
					<view class="withdraw-list" v-if="activeTab == 3">
						<view class="trade-type">
							<view class="type">提现</view>
							<view class="date">{{item.time}}</view>
						</view>
						<view class="withdraw-money" >
							<view class="status">{{item.status}}</view>
							<view class="">-{{item.refund_fee}}元</view>
						</view>
					</view>
					<view class="income-list" v-if="activeTab == 4">
						<view class="trade-type">
							<view class="cir">{{item.circle}}</view>
							<view class="income-type">{{item.order.user}}打赏{{item.order.rwuser}}{{item.order.total}}鲸果</view>
							<view class="date">{{item.time}}</view>
						</view>
						<view class="money" >
							+{{item.j_coin}}鲸币
						</view>
					</view>
				</view>
			</view>
			<view class="none"v-if="tradeList && !tradeList.length && isload">
				暂无记录
			</view>
		</view>
	</view>
</template>

<script>
	
	import api from '../../../common/api.js'
	
	export default {
		data() {
			return {
				mid:'',						//当前用户id
				coinAmount:'',		//用户当前鲸币数量
				tradeList:[],			//交易账单
				isload:false,			//是否加载完成
				page:1,						//页数
				limit:10,					//条数限制
				activeTab:0,			//选中项
				cateList:[{name:'收到打赏'},{name:'打赏记录'},{name:'充值记录'},{name:'提现记录'},{name:'收益记录'}],
			}	
		},
		methods:{
			go(url) {//页面跳转
				console.log('==========');
				uni.navigateTo({
					url
				})
			},
			async changeTab(e) {//切换选项
				this.activeTab = e
				this.page = 1
				this.isload = false
				this.tradeList = await this.getCorrespondingData(this.page,this.limit)
				this.isload = true
			},
			
			async getCorrespondingData(page,limit) {//根据当前activeTab请求对应活动列表数据
				if(this.activeTab == 0) {
					return await this.getBeRewardList(page,limit)
				}else if(this.activeTab == 1) {
					return await this.getRewardBillList(page,limit)
				}else if(this.activeTab == 2) {
					return await this.getInvestList(page,limit)
				}else if(this.activeTab == 3) {
					return await this.getWithdrawList(page,limit)
				}else if(this.activeTab == 4) {
					return await this.getIncomeList(page,limit)
				}
			},
			
			async getBeRewardList(page,limit) {//被打赏账单
				return await api.GetBeRewardList(page,limit) 
			},
			
			async getRewardBillList(page,limit) {//打赏账单
				return await api.GetRewardBillList(page,limit) 
			},
			
			async getInvestList(page,limit) {//充值账单
				return await api.GetInvestList(page,limit) 
			},
			
			async getWithdrawList(page,limit) {//提现账单
				return await api.GetWithdrawList(page,limit) 
			},
			
			async getIncomeList(page,limit) {//收益账单
				return await api.GetIncomeList(page,limit) 
			},
		},
		
		async onLoad(p) {
			this.mid = p.mid
			this.isload = false
			this.tradeList = await this.getBeRewardList(this.page,this.limit)
			this.isload = true
			console.log(this.tradeList);
			console.log(this.mid);
		},
		
		async onShow() {
			this.coinAmount = await api.GetCheckCoin()
			
		},
		
		async onReachBottom() {
			let nList =  await this.getCorrespondingData(this.page + 1,this.limit)
			if(nList.length) {
				this.page ++
				this.tradeList = [...this.tradeList,...nList]
			}else {
				uni.showToast({
					title:'没有更多了',
					icon:'none'
				})
			}
			
		}
	}
</script>

<style lang="scss">
page {
	background-color: #fff;
}
.wallet-f {
	background-color: #fff;
	padding:40rpx 20rpx 20rpx;
	.tip {
		font-size: 32rpx;
		color: #9599b8;
		line-height: 40rpx;
	}
	.wallet-action {
		display: flex;
		height: 120rpx;
		width: 710rpx;
		border-bottom: 1rpx solid #f1f1f1;
		.surplus {
			font-size: 48rpx;
			width: 460rpx;
			height: 120rpx;
			line-height: 120rpx;
			font-weight: 600;
			color: #fc2a53;
		}
		.func {
			width: 250rpx;
			height: 120rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.invest,.withdraw {
				width: 110rpx;
				height: 44rpx;
				line-height: 44rpx;
				text-align: center;
				color: #3487fd;
				border: 1rpx solid #3487fd;
				border-radius: 25rpx;
			}
		}
	}
	.change-tip {
		width: 660rpx;
		padding: 20rpx 10rpx;
		font-size: 30rpx;
		line-height: 50rpx;
		color: #ababab;
	}
}
.none {
	height: calc(100vh - 640rpx);
	display: flex;
	justify-content: center;
	align-items: center;
	color: #A7AAB5;
}
.select-tab {
	width: 750rpx;
	top: 0;
	height: 90rpx;
	z-index: 99;
	background-color: #ffffff;
	background-color: #fff;
	border-bottom: 4rpx solid #F3F6F5;
}
.trade-record {
	border-top: 30rpx solid #f3f3f3;
	background-color: #fff;
	margin: 30rpx 0 0 0;
	.desc {
		width: 750rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		border-bottom: 1rpx solid #f1f1f1;
	}
	.list {
		padding: 0 20rpx 30rpx;
		.bereward-list,.reward-list,.invest-list,.withdraw-list,.income-list {
			display: flex;
			justify-content: space-around;
			align-items: center;
			width: 710rpx;
			height: 130rpx;
			border-bottom: 1rpx solid #f1f1f1;
			.trade-type {
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				width: 440rpx;
				height: 130rpx;
				font-size: 34rpx;
				.income-type {
					color: #8f8f8f;
					font-size: 32rpx;
				}
				.cir {
					font-size: 32rpx;
				}
				.type {
					letter-spacing: 2rpx;
					font-size: 32rpx;
					line-height: 32rpx;
					
				}
				.date {
					font-size: 28rpx;
					line-height: 36rpx;
					color: #8f8f8f;
				}
			}
			.money {
				width: 220rpx;
				height: 130rpx;
				display: flex;
				flex-direction: column;
				flex-direction: row-reverse;
				align-items: center;
				font-size: 34rpx;
				color: #3f3f3f;
			}
			.invest-money {
				font-size: 34rpx;
				color: #0068ff;
			}
		}
		.income-list {
			height: 140rpx;
		}
		.invest-list {
			.money {
				color: #0068ff;
			}
		}
		.withdraw-list {
			.withdraw-money {
				width: 220rpx;
				height: 130rpx;
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				justify-content: space-evenly;
				// align-items: center;
				font-size: 34rpx;
				color: #3f3f3f;
			}
		}
	}
}
</style>
